import { useEffect } from 'react'
import html2canvas from 'html2canvas'

const PrintScreen = () => {
  useEffect(() => {
    html2canvas((document as any).querySelector('#capture'), {
      useCORS: true,
      backgroundColor: null
    }).then((canvas) => {
      console.log('vanvas:', canvas)
      document.body.appendChild(canvas)
    })
  }, [])

  return (
    <div>
      PrintScreen
      <div id="capture" style={{ padding: 10 }}>
        {/* <div
          style={{
            border: '5px solid red',
            width: '100px',
            height: '100px',
            borderRadius: '50%'
          }}
        >
          <img
            width="100%"
            height="100%"
            crossOrigin="anonymous"
            // src="https://img0.baidu.com/it/u=103721101,4076571305&fm=26&fmt=auto&gp=0.jpg"
            style={{ borderRadius: '50%' }}
            alt=""
          />
        </div> */}
        {/* <div
          className="box"
          style={{
            padding: 20,
            background: 'red',
            boxShadow: '2px 5px #805858'
          }}
        >
          我是一个黄色的盒子
        </div> */}
        <h4 style={{ color: '#000' }}>Hello world!</h4>
        <img
          style={{
            padding: 20,
            width: 500,
            height: 600
          }}
          crossOrigin="anonymous"
          src="/1.jpeg"
          // src="https://img0.baidu.com/it/u=103721101,4076571305&fm=26&fmt=auto&gp=0.jpg"
          alt=""
        />
      </div>
    </div>
  )
}

export default PrintScreen
